<template>
  <div class="finance-info-table-page">
    <el-table
      :data="tableList"
      style="width: 100%"
      header-cell-class-name="header-cell-class-name"
      stripe
      border
    >
      <el-table-column
        prop="number"
        label="编号"
        align="center"
      >
        <template slot-scope="scope">
          <div>{{ pageSize*(currentPage-1)+ scope.$index+1 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="userInfo.role==1||userInfo.role==4"
        prop="account"
        label="用户名"
        align="center"
      ></el-table-column>
      <el-table-column prop="amount" label="充值金额" align="center">
        <template slot-scope="{ row }">
          <div>￥{{ (Number(row.amount)*0.01).toFixed(2) }}</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="kind"
        label="支付渠道"
        align="center"
      >
        <template slot-scope="{ row }">
          <div>
            {{payStyle[row.kind]}}
          </div>
        </template>

      </el-table-column>
      <el-table-column prop="status" label="支付状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="tagStatus[row.status]">
            {{ orderStatus[row.status] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createrTime"
        label="支付时间"
        align="center"
      >
        <template slot-scope="{ row }">
          <div>{{ dateFormat("YYYY mm-dd HH:MM:SS", new Date(Number(row.createTime))) }}</div>
        </template>
      </el-table-column>
      <!--<el-table-column prop="balance" label="余额" align="center">-->
        <!--<template slot-scope="{ row }">-->
          <!--<div>￥{{ row.balance }}</div>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="20"
        :total="total"
        layout=" prev, pager, next,sizes,jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {trace} from "../../../utils/trace"
import {dateFormatCC} from "../../../utils/tools"
import {mapGetters} from "vuex"

export default {
  components: {},
  props: {
  },
  data() {

    return {
      dateFormat:dateFormatCC,
      currentPage: 1,
      total: 400,
      pageSize: 20,
      tableList: [
        {
          number: "00001",
          amount: "10000",
          channel: "微信支付",    //可选 1 wx 2 ali 3 bank all 8789324728947
          status: 1,
          createrTime: "2017 10-31 23:12:00",
          balance: "300"
        }
      ],
      orderStatus: {
        1: "支付中",
        2: "支付失败",
        3: "支付成功",
      },
      tagStatus: {
        1: "danger",
        2: "danger",
        3: "success",
      },
      payStyle: {
        1: "微信支付",
        2: "支付宝支付",
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    handleSizeChange(value) {
      // trace("handleSizeChange",value,this.pageSize)
      this.pageSize = value;
      this.currentPage = 1;
      this.queryOrder();
    },
    handleCurrentChange(value) {
      // trace("handleCurrentChange",value,this.currentPage)
      this.currentPage = value;
      this.queryOrder();
    },
    queryOrder:function () {
      // 获取充值记录
      let page=this.currentPage;
      let count = this.pageSize;
      let kind = 8789324728947;
      this.$store.dispatch('finance/queryCharge', {page,count,kind}).then((data) => {
        // trace("获取充值记录---data",data)
        this.tableList = data.data;
        this.total = data.total;
      }).catch((err) => {

      })
    }

  },
  created() {
this.queryOrder();

  },

  mounted() {}
};
</script>
<style lang="scss" scoped>
::v-deep .header-cell-class-name {
  background: #ecf0f3;
}
.pagination-box {
  margin: 15px 0;
  text-align: right;
}
</style>
